<template>
    <a-modal
      :title="'查看下级'"
      :visible="true"
      width="60%"
      :footer="null"
      @cancel="reset"
    >
      <div class="main">
        <a-card
          v-for="item,i in backList"
          :key="i"
          :title="item.desc"
          style="margin-bottom:20px"
        >
          <a-row>
            <a-col
              :span="6"
              v-for="subitem,i in item.dictRelationDetail"
              :key="i"
              style="display:flex;justify-content:center"
            >
              <div class="item">
                {{ subitem.name }}
              </div>
            </a-col>
          </a-row>
  
        </a-card>
      </div>

    </a-modal>
  </template>
    
    <script>
  import { getDictList, getDictChildList, getDictRelation } from '@api/rd/index'
  export default {
    components: {
    },
  
    props: {
    childItem: {
        type: Object,
        default: null
      }
    },
  
    data() {
      return {
        id: '',
        parentList: [],
        childList: [],
        dictDetailId: [],
        parent: undefined,
        parentId: '',
        dictItem:{},
        dictId: '',
        showChild:false,
        form: this.$form.createForm(this),
        selectedKeys: [],
        targetKeys: [],
        backList: []
      }
    },
    computed: {
      userInfo() {
        return this.$store.getters.userInfo || null
      }
    },
    created() {
      const { childItem } = this.$props
      console.log(childItem);
      if (childItem) {
        this.parentId = childItem.id
      }
      this.loadData()
    },
    methods: {
      reset() {
        this.form.resetFields()
        this.$emit('closeChildDetail')
      },

      async loadDetail() {
        const params = {
          parentDictDetailId: this.parentId
        }
        try {
          const res = await getDictRelation('dict', params)
          if (res.code == 200) {
            if (res.data.length) {
              this.backList = res.data
              this.backList.map((x)=>{
                  this.parentList.map((y)=>{
                      if(x.dictId == y.id){
                          x.desc = y.description
                      }
                  })
              })
            }
          } else {
            this.$message.error(res.msg)
          }
        } catch (error) {
          this.$message.error('获取详情失败！')
        } finally {
          this.loadingChild = false
        }
      },
      async loadData() {
        const params = {
          current: 1,
          size: 100,
        }
        try {
          const res = await getDictList('dict', params)
          if (res.code == 200) {
            this.parentList = res.data.records
            this.loadDetail()
          } else {
            this.$message.error(res.msg)
          }
        } catch (error) {
          this.$message.error('获取数据字典列表失败！')
        }
      },
    }
  }
  </script>
    
    <style scoped lang="less">
  .info-action {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    // margin-bottom: 20px;
  }
  
  .ml-20 {
    margin-left: 20px;
  }
  .item {
    width: 80%;
    height: 40px;
    border-radius: 10px;
    text-align: center;
    font-size: 18px;
    margin-bottom:10px;
    line-height: 40px;
    /* border: 1px solid; */
    background: #f5f5f5;
    color: rgb(0 0 0 / 85%);
  }
  </style>
    